<template>
  <div class="page">
    <div class="gva-card-box">
      <div class="gva-card gva-top-card">
        <div class="gva-top-card-left">
          <div class="gva-top-card-left-title">{{ userInfo.name }}，请开始一天的工作吧~</div>
          <div class="gva-top-card-left-dot">{{ weatherInfo }}</div>
          <el-row class="my-8 w-[500px]">
            <!--            <el-col :span="8" :xs="24" :sm="8">-->
            <!--              <div class="flex items-center">-->
            <!--                <el-icon class="dashboard-icon">-->
            <!--                  <sort/>-->
            <!--                </el-icon>-->
            <!--                今日流量 (1231)-->
            <!--              </div>-->
            <!--            </el-col>-->
            <el-col :span="8" :xs="24" :sm="8">
              <div class="flex items-center">
                <el-icon class="dashboard-icon">
                  <avatar/>
                </el-icon>
                总用户数 ({{ count }})
              </div>
            </el-col>
            <el-col :span="8" :xs="24" :sm="8">
              <div class="flex items-center">
                <el-icon class="dashboard-icon">
                  <comment/>
                </el-icon>
                好评率 (99%)
              </div>
            </el-col>
          </el-row>
          <div>
            <div class="gva-top-card-left-item">
              <!--              使用教学：-->
              <!--              <a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1Rg411u7xH/"-->
              <!--              >https://www.bilibili.com/video/BV1Rg411u7xH</a>-->
            </div>
            <div class="gva-top-card-left-item">
              <!--              插件仓库：-->
              <!--              <a style="color:#409EFF" target="view_window" href="https://plugin.gin-vue-admin.com/#/layout/home">https://plugin.gin-vue-admin.com</a>-->
            </div>
          </div>
        </div>
        <img src="@/assets/dashboard.png" class="gva-top-card-right" alt>
      </div>
    </div>
    <div class="gva-card-box">
      <div class="gva-card quick-entrance">
        <div class="gva-card-title">快捷入口</div>
        <el-row :gutter="20">
          <el-col v-for="(card, key) in userCard" :key="key" :span="4" :xs="8"
                  class="quick-entrance-items" @click="toTarget(card.name)">
            <div class="quick-entrance-item">
              <div class="quick-entrance-item-icon"
                   :style="{ backgroundColor: 'rgba(179, 127, 235,.3)' }">
                <el-icon>
                  <component :is="card.meta.icon" :style="{ color: '#b37feb' }"/>
                </el-icon>
              </div>
              <p>{{ card.meta.title }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="gva-card-box">
      <div class="gva-card">
        <div class="card-header">
          <span>通知公告</span>
        </div>
        <div v-for="(announcement, index) in tableData" v-loading="loading" :key="index" class="el-list-item">
          <br>
          <div class="text item" @click="viewAnnouncement(announcement)">
                    <span class="flex-start">
                       <el-icon><ChatLineSquare/></el-icon>
                      {{ announcement.title }}
                    </span>
            <div class="update-time">
              <el-icon>
                <Clock/>
              </el-icon>
              {{ announcement.createTime }}
            </div>
          </div>
        </div>
        <!-- 分页器 -->
        <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]"
                       small :hide-on-single-page="pageSize===10"
                       :total="total" layout="total, prev, pager, next, jumper"
                       @current-change="handleCurrentChange" @size-change="handleSizeChange"/>
      </div>
      <el-dialog v-model="dialogVisible" :title="dialogValue.title"
                 :close-on-press-escape="true" :show-close="true">
        <pre>{{ dialogValue.content }}</pre>
        <br>
        <div slot="footer" style="text-align: right">
          更新时间：{{ dialogValue.updateTime }}
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {useWeatherInfo} from '@/view/dashboard/weather.js'
import {getAnnouncements} from "@/api/announcements";
import {Avatar, ChatLineSquare, Clock, Comment, Sort} from "@element-plus/icons-vue";
import {getUserCount, getUserInfo} from "@/api/user";
import {useRouterStore} from "@/pinia/modules/router";

defineOptions({
  name: 'Dashboard'
})

const weatherInfo = useWeatherInfo()

const toolCards = ref([
  {
    label: '用户管理',
    icon: 'monitor',
    name: 'user',
    color: '#ff9c6e',
    bg: 'rgba(255, 156, 110,.3)'
  },
  {
    label: '角色管理',
    icon: 'setting',
    name: 'authority',
    color: '#69c0ff',
    bg: 'rgba(105, 192, 255,.3)'
  },
  {
    label: '个人云盘',
    icon: 'menu',
    name: 'Manage',
    color: '#b37feb',
    bg: 'rgba(179, 127, 235,.3)'
  },
  {
    label: '客户管理',
    icon: 'menu',
    name: 'customer',
    color: '#b37feb',
    bg: 'rgba(179, 127, 235,.3)'
  },
  {
    label: '协商记录',
    icon: 'menu',
    name: 'negotiation',
    color: '#b37feb',
    bg: 'rgba(179, 127, 235,.3)'
  },
  {
    label: '团队管理',
    icon: 'menu',
    name: 'teams',
    color: '#b37feb',
    bg: 'rgba(179, 127, 235,.3)'
  }
])


//page
const total = ref(0)
const page = ref(1)
const pageSize = ref(5)
const loading = ref(false)
const tableData = ref()
const userInfo = ref({
  name: ''
})
const count = ref()
const dialogVisible = ref(false)
const dialogValue = ref({
  title: '',
  content: '',
  createTime: '',
  updateTime: ''
})
const userCard = ref([])
const routerStore = useRouterStore()
const getUserCard = () => {
  const routers = routerStore.asyncRouters
  routers[0].children.forEach(r => {
    if (r.name !== 'dashboard' && r.name !== 'reload') {
      if (r.children !== undefined && r.children !== null) {
        r.children.forEach(item => {
          userCard.value.push(item)
        })
      }
    }
  })
  userCard.value = userCard.value.slice(0, 6)
}
getUserCard()

const getInfo = async () => {
  const res = await getUserInfo()
  userInfo.value = res.data
}
getInfo()


const handleSizeChange = (val) => {
  pageSize.value = val
  getList()
}
const handleCurrentChange = (val) => {
  page.value = val
  getList()
}
const getList = async () => {
  loading.value = true
  const res = await getAnnouncements({page: page.value, pageSize: pageSize.value})
  const countRes = await getUserCount()
  count.value = +countRes.data
  if (res.code === 0) {
    tableData.value = res.data.records
    total.value = +res.data.total
    loading.value = false
  }
}

const viewAnnouncement = (announcement) => {
  dialogVisible.value = true
  dialogValue.value = announcement
}

const router = useRouter()

const toTarget = (name) => {
  router.push({name})
}
getList();
</script>

<style lang="scss" scoped>
.page {
  @apply p-0;
  .gva-card-box {
    @apply p-4;
    & + .gva-card-box {
      @apply pt-0;
    }
  }

  .gva-card {
    @apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
    .gva-card-title {
      @apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
    }
  }

  .gva-top-card {
    @apply h-72 flex items-center justify-between text-gray-500;
    &-left {
      @apply h-full flex flex-col w-auto;
      &-title {
        @apply text-3xl text-gray-600;
      }

      &-dot {
        @apply mt-4 text-gray-600 text-lg;
      }

      &-item {
        + .gva-top-card-left-item {
          margin-top: 24px;
        }

        margin-top: 14px;
      }
    }

    &-right {
      height: 600px;
      width: 600px;
      margin-top: 28px;
    }
  }

  ::v-deep(.el-card__header) {
    @apply p-0  border-gray-200;
  }

  .card-header {
    @apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
  }

  .quick-entrance-items {
    @apply flex items-center justify-center text-center text-gray-800;
    .quick-entrance-item {
      @apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
      &:hover {
        @apply shadow-lg;
      }

      &-icon {
        @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
      }

      p {
        @apply mt-2.5;
      }
    }
  }
}

.dashboard-icon {
  @apply flex items-center text-xl mr-2 text-blue-400;
}

.update-time {
  text-align: right;
}

pre {
  white-space: pre-wrap;
  /* 保留空白符序列，并正常进行换行 */
  white-space: -moz-pre-wrap;
  /* 兼容火狐浏览器 */
  //white-space: -webkit-pre-wrap;
  /* 兼容谷歌浏览器 */
  white-space: -o-pre-wrap;
  /* 兼容opera浏览器 */
  word-wrap: break-word;
  /* 允许字母、url地址换行 */
}

</style>
